<template>
	<view class="address-window-container">
		<view class="address-window" :class="value === true ? 'on' : ''">
			<view class="title border-1px">
				选择地址
				<text class="iconfont icon-guanbi" @click="closeAddress"></text>
			</view>
			<view class="list" v-if="addressList.length">
				<view class="item acea-row row-between-wrapper item_line"
					:class="item.id === checked ? 'font-color-red' : ''" v-for="(item, addressIndex) in addressList"
					@click="tapAddress(addressIndex)" :key="addressIndex">
					<text class="iconfont icon-ditu" :class="item.id === checked ? 'font-color-red' : ''"></text>
					<view class="addressTxt">
						<view class="name" :class="item.id === checked ? 'font-color-red' : ''">
							{{ item.realName }}
							<text class="phone">{{ item.phone }}</text>
						</view>
						<view class="line1" :class="item.id === checked ? 'line1 font-color-red' : 'line1'">
							{{ item.province }}{{ item.city }}{{ item.district
              }}{{ item.detail }}
						</view>
					</view>
					<text class="iconfont icon-complete" :class="item.id === checked ? 'font-color-red' : ''"></text>
				</view>
			</view>
			<view class="pictrue" v-if="addressList.length < 1">
				<img :src="$VUE_APP_RESOURCES_URL+'/images/noAddress.png'" class="image" />
			</view>
			<view class="addressBnt bg-color-red" @click="goAddressPages">新加地址</view>
		</view>
		<view class="mask" @touchmove.prevent :hidden="value === false" @click="closeAddress"></view>
	</view>
</template>
<script>
	export default {
		name: "AddressWindow",
		props: {
			value: Boolean,
			addressList:{
				type:Array,
				required:true,
				default:()=>[]
			}
		},
		data(){
			return {
				checked:null
			};
		},
		methods: {
			closeAddress() {
				this.$emit("close", false);
			},
			tapAddress(index) {
				this.checked = this.addressList[index].id
				this.$emit("checked", this.addressList[index]);
				this.$emit("close");
			},
			goAddressPages(){
				uni.navigateTo({
					url:'/pages/subPackages/template/address/index'
				})
			}
		}
	};
</script>
<style scoped lang="scss" scoped>
	.item_line {
		border-bottom: 1rpx solid $wx-line!important;
		margin: 0 30rpx;
		padding: 20rpx 0;
	}

	.item_line:last-child {
		border: none !important;
	}

	.address-window {
		z-index: 1000;
	}

	.address-window {
		background-color: #ffffff;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 99;
		transform: translate3d(0, 100%, 0);
		transition: all .3s cubic-bezier(.25, .5, .5, .9);
	}

	.address-window.on {
		transform: translate3d(0, 0, 0);
	}

	.address-window .title {
		font-size: 32rpx;
		font-weight: bold;
		text-align: center;
		height: 123rpx;
		line-height: 123rpx;
		position: relative;
		color: $wx-text-color;
		border-bottom: 1rpx solid $wx-line;
	}

	.address-window .title .iconfont {
		position: absolute;
		right: 30rpx;
		color: $wx-text-color-gray-dark;
		font-size: 36rpx;
	}

	.address-window .list {
		max-height: 600rpx;
		overflow-y: auto;
		overflow-x: hidden;
	}

	.address-window .list .item {
		margin-left: 30rpx;
		padding-right: 30rpx;
		font-size: 26rpx;
		color: $wx-text-color;
	}

	.address-window .list .item .iconfont {
		font-size: 36rpx;
		color: $wx-text-color;
	}

	.address-window .list .item .iconfont.icon-complete {
		font-size: 28rpx;
		color: #ffffff;
		margin-left: 16rpx;
	}

	.address-window .list .item .addressTxt {
		flex:1;
		margin-left:16rpx;
	}

	.address-window .list .item .addressTxt .name {
		font-size: 28rpx;
		font-weight: bold;
		color: $wx-text-color;
		margin-bottom: 4rpx;
	}

	.address-window .list .item .addressTxt .name .phone {
		margin-left: 18rpx;
	}

	.address-window .addressBnt {
		font-size: 28rpx;
		font-weight: bold;
		color: #ffffff;
		width: 690rpx;
		height: 86rpx;
		border-radius: 43rpx;
		text-align: center;
		line-height: 86rpx;
		margin: 85rpx auto;
		background-color: $wx-primary;
	}

	.address-window .pictrue {
		width: 414rpx;
		height: 336rpx;
		margin: 80rpx auto;
	}

	.address-window .pictrue .image {
		width: 100%;
		height: 100%;
	}

	/*地址弹窗*/

	.address-window {
		background-color: #ffffff;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 99;
		transform: translate3d(0, 100%, 0);
		transition: all .3s cubic-bezier(.25, .5, .5, .9);
	}

	.address-window.on {
		transform: translate3d(0, 0, 0);
	}

	.address-window .title {
		font-size: 32rpx;
		font-weight: bold;
		text-align: center;
		height: 123rpx;
		line-height: 123rpx;
		position: relative;
		color: $wx-text-color;
	}

	.address-window .title .iconfont {
		position: absolute;
		right: 30rpx;
		color: $wx-text-color-gray-dark;
		font-size: 36rpx;
	}

	.address-window .list {
		max-height: 600rpx;
		overflow-y: auto;
		overflow-x: hidden;
	}

	.address-window .list .item {
		margin-left: 30rpx;
		padding-right: 30rpx;
		font-size: 26rpx;
		color: $wx-text-color;
	}

	.address-window .list .item .iconfont {
		font-size: 36rpx;
		color: $wx-text-color;
	}

	.address-window .list .item .iconfont.icon-complete {
		font-size: 28rpx;
		color: #ffffff;
	}

	.address-window .list .item .addressTxt {
		flex:1;
	}

	.address-window .list .item .addressTxt .name {
		font-size: 28rpx;
		font-weight: bold;
		color: $wx-text-color;
		margin-bottom: 4rpx;
	}

	.address-window .list .item .addressTxt .name .phone {
		margin-left: 18rpx;
	}

	.address-window .addressBnt {
		font-size: 28rpx;
		font-weight: bold;
		color: #ffffff;
		width: 690rpx;
		height: 86rpx;
		border-radius: 43rpx;
		text-align: center;
		line-height: 86rpx;
		margin: 85rpx auto;
	}

	.address-window .pictrue {
		width: 414rpx;
		height: 336rpx;
		margin: 80rpx auto;
	}

	.address-window .pictrue .image {
		width: 100%;
		height: 100%;
	}
</style>